<template>
  <el-dialog
    title="编辑部门"
    :visible.sync="dialogVisibleEdit"
    :before-close="closedDialog"
  >
    <el-form v-if="currInfo" ref="ruleForm" :rules="rules">
      <el-form-item
        label="部门名称"
        prop="departname"
        :label-width="formLabelWidth"
      >
        <el-input v-model="currForm.departname" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closedDialog">取 消</el-button>
      <el-button type="primary" @click="submitDialog">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    dialogVisibleEdit: {
      type: Boolean,
      default: false
    },
    currInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      formLabelWidth: '120px',
      rules: {
        departname: [
          { required: true, message: '请输入部门名称', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    currForm() {
      return this.currInfo
    }
  },
  methods: {
    closedDialog() {
      this.$emit('editDialogClosed')
      this.$refs.ruleForm.resetFields()
    },
    async submitDialog() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const { data } = await this.$http.put(
            'department/' + this.currForm.id,
            this.currForm
          )
          if (data.meta.status === 201) {
            // 添加成功后，关闭对话框，更新 users 页码表格数据
            this.$message.success(data.meta.msg)
            this.$emit('editDialogClosed')
            this.$emit('editSuccess')
            this.$refs.ruleForm.resetFields()
          } else {
            this.$message.error(data.meta.msg)
          }
        } else {
          this.$message.error('填入项未通过验证')
          return false
        }
      })
    }
  }
}
</script>

<style></style>
